<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>杨澎锴的作业实践26</title>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>

  <body>
    <header>
      <h1>Vue.js基本概念</h1>
      <h2>列表渲染</h2>
    </header>
    <main>
      <div id="app">
        <p v-for="item in epidemic" v-bind:key="item.id">
          地点：{{ item.city }}等级：{{ item.responseLevel }}
        </p>
        <table border="10">
          <tr>
            <th>地点</th>
            <th>等级</th>
          </tr>
          <tr v-for="item in epidemic" v-bind:key="item.id">
            <td>{{ item.city }}</td>
            <td>{{ item.responseLevel }}</td>
          </tr>
        </table>
        <!-- 复杂版css -->
        <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">
          网络编辑的学习不是一蹴而就的事情，想想如果现在就知道干嘛了，那未来会少了多少惊喜和惊吓
        </div>
        <!-- 精简版 -->
        <div :style="styleObject" :class="classObject">
          网络编辑的学习不是一蹴而就的事情，想想如果现在就知道干嘛了，那未来会少了多少惊喜和惊吓
        </div>
      </div>
    </main>
    <script>
      var app = new Vue({
        el: "#app",
        data: {
          epidemic: [
            { id: 1, city: "newyork", responseLevel: 4 },
            { id: 2, city: "losangles", responseLevel: 3 },
            { id: 3, city: "huston", responseLevel: 1 },
            { id: 4, city: "dallas", responseLevel: 4 },
          ],
          status: "selected",
          activeColor: "red",
          fontSize: 18,
          //   精简定义
          styleObject: {
            color: "green",
            fontSize: "18px",
          },
          classObject: {
            actived: true,
            info: false,
          },
        },
      });
    </script>
  </body>
</html>
